<template>
	<view class="pl30 pr30 fs30">
		<view class="h120 flex row-between col-center u-border-bottom" @click="upload">
			<text>头像</text>
			<view class="flex color9">
				<image :src="showImage" class="w80 h80 radius80 mr30"></image>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="h90 flex row-between col-center u-border-bottom" @click="show=true">
			<text>昵称</text>
			<view class="flex color9">
				<text class="mr30">{{name}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="h90 flex row-between col-center u-border-bottom" @click="$msg('修改手机号请联系管理员')">
			<text>手机号</text>
			<view class="flex color9">
				<text class="mr30">{{userInfo.mobile}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="h90 flex row-between col-center u-border-bottom" @click="$msg('修改身份证号请联系管理员')">
			<text>身份证号</text>
			<view class="flex color9">
				<text class="mr30">{{userInfo.id_card}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="h90 flex row-between col-center u-border-bottom" @click="$jump('/pages/my/edit_pwd')">
			<text>修改密码</text>
			<view class="flex color9">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<u-button shape="circle" class="mt60" style="background: #EEEEEE; font-size: 28rpx;font-weight: 500;color: #999999;" @click="takeOut">退出登录</u-button>
		
		<u-popup v-model="show" mode='bottom' :mask-close-able='false'>
			<view class="h200 mt20">
				<u-field v-model="name" placeholder="请修改昵称" trim label="昵称:" />
			</view>
			<view class="flex mb20">
				<u-button size='medium' @click='cancle'>取消</u-button>
				<u-button type="primary" size='medium' @click='confirm'>确认</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				userInfo:uni.getStorageSync('userInfo'),
				avatar:'',
				name:uni.getStorageSync('userInfo').name,
				showImage:uni.getStorageSync('userInfo').avatar,
				show:false
			};
		},
		methods:{
			...mapMutations('m_user',['getUserInfo']),
			//上传头像
			async upload() {
				const res = await this.$tool.upload()
				if(res.code==1) {
					this.showImage=res.showImg
					this.avatar=res.id
					const res2 = await this.$api.changeInfo({avatar:this.avatar})
					this.$msg(res2.msg)
					//重新获取用户信息
					this.getUserInfo()
				}
			},
			//弹层取消按钮
			cancle() {
				this.name = uni.getStorageSync('userInfo').name
				this.show = false
			},
			//确认修改昵称
			confirm() {
				this.$api.changeInfo({name:this.name}).then(res=>{
					//重新获取用户信息
					this.getUserInfo()
					this.$msg(res.msg)
					this.show=false
				})
			},
			//退出登录
			takeOut() {
				uni.showModal({
				    title: '提示',
				    content: '确认退出登录么?',
				    success: function (res) {
				        if (res.confirm) {
				            uni.removeStorageSync('token')
							uni.navigateTo({
								url:'/pages/login/login'
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #FFFFFF;
}
</style>
